<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>用户登录</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <script>
        function refreshCaptcha() {
            var img = document.getElementById("captchaImg");
            // 获取当前 src（去掉已有的参数）
            var baseUrl = img.src.split('?')[0];
            // 添加时间戳参数避免缓存
            img.src = baseUrl + "?t=" + new Date().getTime();
        }
    </script>
    <script>
        //动态清空网页
        window.onload=function () {
            document.getElementById("username").value="";
            document.getElementById("password").value="";
        }
    </script>
    <script src="/static/js/background.js"></script>

</head>

<body>
<div th:replace="common/top"></div>

<div id="Content">
    <form th:action="@{/catalog/SignonForm}" method="post" style="text-align: center">
        <p>Please enter your username and password.</p>

        <!-- 错误消息显示 -->
        <div th:if="${error}">
            <p><span style="color: #ed9595;" th:text="${error}"></span></p>
        </div>

        <div class="form-groups">
            <label for="username">用户名:</label>
            <input type="text" name="username" id="username" required  autocomplete="off"  ><!-- 禁用自动填充 -->
        </div>

        <div class="form-groups">
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" required autocomplete="new-password">
            <!-- 强制浏览器建议新密码，而非填充旧密码 -->
        </div>

        <div class="form-groups">
            <label for="captcha">验证码:</label>
            <input type="text" name="captcha" id="captcha" required
                   placeholder="输入验证码" style="width: 100px;">
            <img id="captchaImg"  th:src="@{catalog/captcha}"
                 onclick="refreshCaptcha()"
                 style="cursor: pointer; vertical-align: middle; margin-left: 10px;"
                 title="点击刷新验证码">
        </div>

        <input type="submit" value="登录" class="btn-submit">

        <p>
            还没有账号？
            <a href="/catalog/registerForm">立即注册</a>
            <!--        <a th:href="@{/catalog/registerForm}">立即注册</a>-->
        </p>
    </form>

</div>

<div th:replace="common/bottom"></div>
<!--脚本-->
<script th:src="@{/js/background.js}" count="500"></script>
</body>
</html>